const path = require('path')
//导包
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack')
module.exports = {
  // development开发模式、production发布模式
  // mode: 'development',
  devServer: {
    historyApiFallback: true
  },
  // 设置入口文件路径
  entry: path.join(__dirname, './src/package/index.js'),
  // 设置出口文件
  output: {
    // 设置路径
    path: path.join(__dirname, './dist'),
    publicPath: '/dist/',
    // 设置文件名
    filename: 'bundle.js',
    libraryTarget: 'umd', // 　libraryTarget：为了支持多种使用场景，我们需要选择合适的打包格式。libraryTarget 属性。这是可以控制 library 如何以不同方式暴露的选项。
    umdNamedDefine: true
  },
  //这里我们可以剔除掉一些通用包,自己的包不打包这些类库,需要用户环境来提供，发布npm包时可以使用
  externals: {
    vue: 'vue',
    axios: 'axios'
  },
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      // 这里是css文件的配置规则
      {
        // test设置需要匹配的文件类型，支持正则
        test: /\.css$/,
        // use表示该文件类型需要调用的loader(加载器)
        use: ['style-loader', 'css-loader']
      },
      // 这里是less文件的配置规则
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      // 这里是scss文件的配置规则
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        // 设置图片的后缀名
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        // limit用来设置字节数，只有小于limit值的图片，才会转换
        use: 'url-loader?limit=16940'
      },
      // vue文件的配置规则
      { test: /\.vue$/, use: ['vue-loader'] }
    ]
  }
}
